<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="utf-8">
 <title>全部党员信息</title>
 <meta name="renderer" content="webkit">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <link rel="stylesheet" href="../layui/css/layui.css" th:href="@{../layui/css/layui.css}" media="all">
<link href="favicon.ico" rel="shortcut icon">
</head>
<script th:src="@{../layui/layui.js}" charset="utf-8"></script>

<body>

<table class="layui-hide" id="demo" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">添加</button>
  </div>
</script>
<!-- 分页组件 -->
<div>
    <div id="page_container"></div>
</div>

<script>
layui.use('table', function(){
	  var table = layui.table;
//执行一个 table 实例
	table.render({
	  elem: '#demo'
	  ,height: 'full-80'
	  //,cellMinWidth: 50
	  ,url: 'list' //数据接口
	  ,even:true
	  ,title: '新闻栏目表'
	  //,limit:20
	  ,toolbar:'#toolbarDemo'  //开启工具栏
	  ,cols: [
		  [ //表头
	    {field: 'ntid', title: '编号', sort: true, fixed: 'left', width:200}
	    ,{field: 'tname', title: '栏目名', width:420}
	    ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
	 	 ]
		]
	});
	//头工具栏事件
	  table.on('toolbar(test)', function(obj){
		layer.open({
			type:1,
			title:'添加用户',
			area:'800px',
			anim: 1,
			skin: 'layui-layer-molv',
			content:layui.$('#add')
		})
	  });
	
});
</script>
<!-- 添加 -->
<form id="add" class="layui-form" action="add" lay-filter="example" method="post" hidden="true">
  <div class="layui-form-item">
    <label class="layui-form-label">栏目名称</label>
    <div class="layui-input-block">
      <input type="text" name="tname" lay-verify="title" autocomplete="off" placeholder="请输入栏目名称" class="layui-input">
    </div>
  </div>
    <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<!-- 修改 -->
<form id="update" class="layui-form layui-form-pane" action="update" lay-filter="formTest" method="post" hidden="true">
  <input type="hidden" name="ntid" lay-verify="title" autocomplete="off" class="layui-input">
  <div class="layui-form-item">
    <label class="layui-form-label">栏目名称</label>
    <div class="layui-input-block">
      <input type="text" name="tname" lay-verify="title" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>



<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
layui.use(['table','form'], function(){
  var table = layui.table;
  var form = layui.form;
  //监听工具条
  table.on('tool(test)', function(obj){
    var data = obj.data;
    if(obj.event === 'update'){
    	//layer.alert(JSON.stringify(data));
    	//layui.form.render('select')
    	//1.获取这行数据
    	//2.填充form
    	form.val("formTest",data);
    	/**1.首先需要获取复选框原始的值
    	2.将这个值在页面上展示
    	*/
    	/* var state=data.state;
    	if(state=="禁用"){
    		layui.$("#sel").val(2);
    	}else{
    		layui.$("#sel").val(1);
    	}  */
    	form.render('select','selFilter');   //表单渲染
    	//3.弹框
    	layer.open({
    		type:1,
			title:'修改栏目名称',
			area:'800px',
			anim: 1,
			skin: 'layui-layer-molv',
			content:layui.$('#update'),	
    	}) 
    	//layui.$('#update .pname').html('lidong');
    } else if(obj.event === 'del'){
      layer.confirm('是否删除数据', function(index){
    	  layui.$.ajax({
              url: "delete",
              type: "POST",
              data:{"ntid":data.ntid},
              dataType: "json",                
              success: function(data){            
              if(data==null){    
                 layer.msg(data.ntid);
                 layer.msg("删除失败");                        
              }else{ 
                  layer.msg(data.ntid);
                     //删除这一行
                  layer.msg("删除成功");   
                  obj.del();
                     //关闭弹框
                  }
              },
              error:function(){
            	  layer.closeAll();
                  parent.location.reload();
                  Load(); //删除完需要加载数据
              },
    	  });
      });
    };
  });
});
</script>
</body>
</html>